<template>
    <el-form class="add-update-preview" ref="ruleForm" :rules="rules" :model="ruleForm" label-width="100px">
        <el-form-item label="原密码" prop="password">
            <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
            <el-input v-model="ruleForm.newpassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
            <el-input v-model="ruleForm.repassword" show-password></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onUpdateHandler">确 定</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            ruleForm: {},
            user: {},
            rules: {
                password: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur',
                    },
                ],
                newpassword: [
                    {
                        required: true,
                        message: '新密码不能为空',
                        trigger: 'blur',
                    },
                ],
                repassword: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'));
                            } else if (value !== this.ruleForm.newpassword) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    mounted() {
        this.$http({
            url: `${this.$storage.get('sessionTable')}/session`,
            method: 'get',
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.user = data.data;
            } else {
                this.$message.error(data.msg);
            }
        });
    },
    methods: {
        onLogout() {
            this.$storage.remove('Token');
            this.$router.replace({ name: 'login' });
        },
        // 修改密码
        onUpdateHandler() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    let password = this.user.mima || this.user.password;
                    if (this.ruleForm.password !== password) {
                        return this.$message.error('原密码错误');
                    }
                    this.user.password = this.ruleForm.newpassword;
                    this.user.mima = this.ruleForm.newpassword;
                    this.$http({
                        url: `${this.$storage.get('sessionTable')}/update`,
                        method: 'post',
                        data: this.user,
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '修改密码成功,下次登录系统生效',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {},
                            });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped></style>
